<template>
  <div class="order">
    <section class="address-search py-20 flex-space-between">
      <div @click="back"> < </div>
      <div>订单中心</div>
      <div></div>
    </section>

    <section>
      <van-contact-card type="add" @click="onAdd" />
    </section>


    <section class="p-10">
      <div class="mt-20 mb-20">商品详情</div>
      <div v-for="item in 5" class="mb-20">
        <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </div>
    </section>

    <section class="p-10 border-top">
      <div class="flex items-center flex-space-between  p-10">
        <div>小计：</div>
        <div>￥30</div>
      </div>
      <div class="flex items-center flex-space-between  p-10">
        <div>配送：</div>
        <div>￥30</div>
      </div>
      <div class="flex items-center flex-space-between p-10">
        <div>应付金额：</div>
        <div>￥30</div>
      </div>
      <div class="flex items-center flex-space-between p-10">
        <div>订单备注：</div>
        <div><van-field v-model="value"  class="border"/></div>
      </div>

    </section>


    <section class="p-10 border-top mb-20 border-bottom">
      <div class="mb-20">优惠卡券</div>
      <div class="flex items-center ">卡券名称  <van-checkbox  class="ml-10" v-model="checked">复选框</van-checkbox></div>
    </section>

    <section class="flex items-center flex-center mb-20">
      <van-button type="info" class="w-90per mb-40" @click="pay">立即支付</van-button>
    </section>

  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      value:'',
      checked:'',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [{ text: '杭州市', value: '330100' }],
        },
        {
          text: '江苏省',
          value: '320000',
          children: [{ text: '南京市', value: '320100' }],
        },
      ],
    }
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },

    pay(){
      this.$router.push('/paySuccess')
    },
    onAdd() {
     this.$router.push('/address')
    },
    back(){
      history.go(-1)
    }
  },

}
</script>

<style lang="less" scoped>
.address-search {
  background-color: #39a9ed;
  display: flex;
  align-items: center;
  height: 50px;
  color: #fff;
  justify-content: space-around;
}
</style>
